<script setup lang="ts">
import EchartBase from "@/components/echart/echart-base.vue";
import { onMounted, ref, defineProps, withDefaults, defineEmits, watch } from 'vue'
import type { ECBasicOption } from 'echarts/types/dist/shared'

interface IProps {
  width?: string|number;
  height?: string|number;
  title?: string;
  xAxis?:Array<any>; //x轴设置
  yAxis?:Array<any>;
  xData?: Array<any>; //x轴数据设置
  yData?: Array<any>;
  showTooltip?: boolean; // 弹出提示？
  showLegend?: boolean; // 显示label？
  showXAxis?: boolean; //显示x轴？
  showYAxis?: boolean; //显示y轴？
  labelName?: string; //label名称
  showBackground?: boolean; //是否显示柱条的背景色
}
const props = withDefaults(defineProps<IProps>(),{
  width:'100%',
  height: '100%',
  title: '',  // 标题
  xData:  () => [5, 20, 36, 10, 10, 20,12],
  labelName: '测试', //小标
  showTooltip: true,
  showLegend: true,
  showXAxis: true,
  showYAxis: true,
  showBackground: true
})
watch(props,async (n:IProps) => {
  options.value = setOption(n)
})
let options = ref<ECBasicOption>({})
const setOption = (params: IProps) => {
  return {
    title: {
      show: true,
      text: params.title
    },
    tooltip: {
      show: params.showTooltip,
      trigger: 'axis'
    },
    legend: {
      show: params.showLegend,
      trigger: 'axis',
      data: [params.labelName]
    },
    xAxis: {
      show: params.showXAxis,
      data: params.xAxis || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      show: params.showYAxis,
    },
    series: [
      {
        name: params.labelName,
        type: 'bar',
        showBackground: params.showBackground, //是否显示柱条的背景色
        barWidth: '36%', // 柱条的宽度
        data: params.xData
      }
    ]
  }
}
onMounted(() => {
  options.value = setOption(props)
})
// 基于类型
const emit = defineEmits<{
  click: [param: string]
}>()
const handelItemClick = (param:any) => {
  emit('click',param.name)
}
</script>

<template>
  <EchartBase :options="options" :width="width" :height="height" :handlerClick="handelItemClick" />
</template>

<style scoped lang="scss">

</style>